<template>
  <div class="template1-container">
    <div class="template-content">
      <div class="template-name">{{template.title}}</div>
      <div class="template-text">
        <pre v-html="text"></pre>
      </div>
      <div class="template-footer">
        <span @click="use">使用</span>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    template: Object
  },
  computed: {
    text () {
      return this.template.contentList.filter((v, i) => (i % 2) === 0).join('<br/>')
    }
  },
  methods: {
    use () {
      this.$emit('use', this.template.id)
    }
  }
}
</script>
<style scoped lang="less" rel="stylesheet/less">
  .template1-container {
    padding: 18px 13px 0;
    font-size: 16px;
  }

  .template-content {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
  }

  .template-name {
    padding: 5px 0;
    font-weight: bold;
    color: #7aabf7;
  }

  .template-text {
    padding: 5px;
    line-height: 20px;
    overflow-y: scroll;
    color: #979797;

    > pre {
      white-space: pre-wrap;
    }
  }

  .template-footer {
    text-align: right;
    padding: 10px;

    > span {
      display: inline-block;
      width: 90px;
      line-height: 32px;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      background: linear-gradient(to bottom, #8ba3fa, #7ec0f7)
    }
  }
</style>
